<template>
  <div>
    <h1>欢迎光临 vue开发的超市收银系统</h1>
    <table>
      <tr>苹果￥10/斤 折扣~8折</tr>
      <tr>
        <span>请你输入你要购买的斤数</span>
        <input type="text" v-model.number="num">
      </tr>
      <tr><button @click="getSum">结账买单</button></tr>
      <tr>结账单：总价：{{total}} 元，折扣价{{dis}} 元，节省了{{num1}}元</tr>
    </table>
  </div>
</template>

<script>
 export default {
    data() {
      return {
        unit: 10,
        num: 0,
        total: 0,
        dis: 0,
        num1: 0
      }
    },
    methods: {
      getSum() {
        this.total = this.unit * this.num
        this.dis = this.total * 0.8
        this.num1 = this.total - this.dis
      }
    },
  }

</script>

<style>

</style>
